<template>
  <div class="rscc-table-page">
    <el-card>
      <div slot="header" class="clearfix">
        <span>现金</span>
      </div>
      <div class="filter-bar">
        <el-date-picker v-model="filters.date" type="date" placeholder="日期" style="width: 150px; margin-right: 10px;" clearable />
        <el-select v-model="filters.type" placeholder="类型" style="width: 100px; margin-right: 10px;" clearable>
          <el-option label="收入" value="收入" />
          <el-option label="支出" value="支出" />
        </el-select>
        <el-input v-model="filters.usage" placeholder="用途" style="width: 120px; margin-right: 10px;" clearable />
        <el-button type="primary" @click="handleFilter">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </div>
      <el-table :data="pagedData" border stripe style="width: 100%; margin-top: 15px;">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="type" label="收入/支出" width="100" />
        <el-table-column prop="amount" label="金额" width="100" />
        <el-table-column prop="usage" label="用途" width="120" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <div style="margin-top: 15px; text-align: right;">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="filteredData.length"
          :page-size="pageSize"
          :current-page.sync="currentPage"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'RsccXjView',
  data() {
    return {
      filters: { date: '', type: '', usage: '' },
      currentPage: 1,
      pageSize: 2,
      tableData: [
        { date: '2024-06-01', type: '收入', amount: 5000, usage: '工资', remark: '月工资' },
        { date: '2024-06-02', type: '支出', amount: 200, usage: '餐饮', remark: '午餐' },
        { date: '2024-06-03', type: '支出', amount: 100, usage: '交通', remark: '地铁' },
        { date: '2024-06-04', type: '收入', amount: 300, usage: '兼职', remark: '外快' },
      ]
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(row => {
        const dateMatch = !this.filters.date || row.date === this.filters.date;
        const typeMatch = !this.filters.type || row.type === this.filters.type;
        const usageMatch = !this.filters.usage || row.usage.includes(this.filters.usage);
        return dateMatch && typeMatch && usageMatch;
      });
    },
    pagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.filteredData.slice(start, start + this.pageSize);
    }
  },
  methods: {
    handleFilter() {
      this.currentPage = 1;
    },
    resetFilter() {
      this.filters = { date: '', type: '', usage: '' };
      this.currentPage = 1;
    }
  }
}
</script>
<style scoped>
.filter-bar { margin-bottom: 10px; }
.el-card { box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important; }
.el-table { box-shadow: none !important; }
</style> 